<template>
  <h1>vue3</h1>
  <p>{{ count }}</p>
  <p>{{ countText }}</p>
</template>

<script lang="ts">
/*
  监视属性 watch
    1. 语法
      watch: {
        xxx(newVal, oldVal) {} // 第一次（初始化渲染）不触发
      }

      watch: {
        xxx: {
          handler(newVal, oldVal) {},
          deep: true, // 深度监视
          immediate: true // 第一次（初始化渲染）触发watch
        }
      }
    2. 什么时候使用监视属性？
      当某个数据发送变化时，需要做一些事（异步）

  计算属性 computed
    1. 语法
      只读
        xxx() {}
      可读可写
        xxx: {
          get() {},
          set() {}
        }
    2. 特点：有缓存
    3. 什么时候使用计算属性？
      默认使用data数据展示，如果data不能直接展示，需要做一些处理（累加、统计、过滤）才能展示，就使用计算属性
      当模板页面表达式较长，使用计算属性优化

    watch和computed区别：
      1. computed有缓存，watch没有
      2. watch可以进行异步操作，computed不行
      3. computed必须有返回值，watch不需要返回值
*/

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  computed: {
    // 只读
    countText() {
      // 依赖一个或多个响应式数据参与计算，得到新值
      return this.count + "次";
    },
    // 可读可写
    countValue: {
      get() {
        return this.count;
      },
      set(val: number) {
        this.count = val;
      },
    },
  },
  watch: {
    count(newVal, oldVal) {
      console.log(newVal, oldVal);
    },
  },
};
</script>

<style></style>
